import React, { useEffect, useState } from "react";
import { Form, Input, Modal, Select, message } from "antd";
import { updateNotification } from "@/pages/user/service/notification";
import { NotificationDataType } from "@/pages/user/types";
import { subscribeType } from "../../../types";

interface SaveProps {
  close: Function;
  data?: NotificationDataType;
  title?: string;
}

export const Save = (props: SaveProps) => {
  const [form] = Form.useForm();
  const { title, data } = props;
  const [subscriberTypeProvider, setSubscriberTypeProvider] = useState<
    string[]
  >([]);
  const [type, setType] = useState<string>(data?.subscriberType ?? "");

  useEffect(() => {
    setSubscriberTypeProvider(subscribeType);
  }, []);

  const save = () => {
    const formData = form.getFieldsValue();
    console.log("formData :", formData);
    updateNotification({ ...formData, id: data?.id }).then((res) => {
      message.success("保存成功");
      props.close();
    });
    // service.saveSubscribe({ ...formData, id: data.id }).subscribe((resp) => {
    //   message.success("保存成功");
    //   props.close();
    // });
  };

  return (
    <Modal
      title={title}
      open
      onCancel={() => props.close()}
      onOk={() => save()}
    >
      <Form form={form} labelCol={{ span: 7 }} wrapperCol={{ span: 13 }}>
        <Form.Item
          label="订阅名称"
          name="subscriberName"
          rules={[{ required: true }]}
          initialValue={data?.subscriberName}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="订阅类型"
          name="subscriberType"
          rules={[{ required: true }]}
          initialValue={data?.subscriberType}
        >
          <Select onChange={(e: string) => setType(e)}>
            {subscriberTypeProvider.map((item) => (
              <Select.Option key={item} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};
